import PropTypes from "prop-types"
import { useState } from "react"
import "./style.scss"

function Button(props) {
  let { type, children, onClick } = props;
  return (
    <div className="ml-button">
      <span className={type} onClick={onClick}>{children}</span>
    </div>
  )
}

Button.propTypes = {
  children: PropTypes.node,
  type: PropTypes.oneOf(['primary', 'danger', 'default', 'info']),
  onClick: PropTypes.func
}

Button.defaultProps = {
  children: '按钮',
  type: 'default',
  onClick: () => { }
}

function ModalHeader(props) {
  let { title, closable, onCancel } = props;
  return (
    <div>
      <div>{title}</div>
      <div onClick={onCancel}>{closable && "X"}</div>
    </div>
  )
}

function ModalFooter(props) {
  let { type, onCancel, onOk, footer } = props;
  // 渲染函数
  let reanderFooter = () => {
    let btns = [];
    switch (type) {
      case "confirm":
        btns = [
          <Button type='primary' key='1' onClick={onOk}>确定</Button>,
          <Button key='2' onClick={onCancel}>取消</Button>
        ]
        break;
      case "danger":
        btns = [
          <Button type='danger' key='1' onClick={onOk}>删除</Button>,
          <Button key='2' onClick={onCancel}>取消</Button>
        ]
        break;
      case "info":
        btns = [
          <Button type='info' key='1' onClick={onCancel}>我知道了</Button>
        ]
        break;
    }
    return btns;
  }
  return (
    footer ? footer() : reanderFooter()
  )
}

function Modal(props) {
  let { children, visiable, onCancel, width } = props;

  let handerLayer = e => {
    // console.log("handerLayer....");
    // e.target表示实打实点击的那个元素
    // console.log(e.target);
    // e.currentTarget 表示点击的那个元素在的最外层元素
    // console.log(e.currentTarget);

    if (e.target.dataset.self) {
      onCancel()
    }
  }
  return (
    // data-self="layer"  叫h5中的自定义属性
    <div
      className="ml-layer"
      style={{ display: visiable ? 'block' : 'none' }}
      data-self="layer"
      onClick={handerLayer}
    >
      <div className="ml-modal" style={{ width: `${width}px`, marginLeft: `-${width / 2}px` }}>
        <header>
          {/* props穿透 */}
          <ModalHeader {...props}></ModalHeader>
        </header>
        <main>
          {
            children
          }
        </main>
        <footer>
          <ModalFooter {...props}></ModalFooter>
        </footer>
      </div>
    </div>
  )
}
Modal.propTypes = {
  // title: PropTypes.string, // 期望传递过来的title是字符串类型
  // title: PropTypes.number, // 期望传递过来的title是数字类型
  title: PropTypes.node,
  closable: PropTypes.bool,
  children: PropTypes.node,
  type: PropTypes.oneOf(["danger", "confirm", "info"]),
  visiable: PropTypes.bool,
  onCancel: PropTypes.func,
  onOk: PropTypes.func,
  footer: PropTypes.func,
  width: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.string
  ])
}

// 非必传项，需要提供默认值
Modal.defaultProps = {
  title: "默认小标题",
  closable: true,
  children: <div>主体内容的默认</div>,
  type: "info",
  visiable: false,
  onCancel: () => { },
  onOk: () => { },
  footer: () => { },
  width: 520
}


function PageA() {
  let [visiable, setVisiable] = useState(false)
  let submit = () => {
    setTimeout(() => {
      console.log("submit...");
      console.log("发送ajax请求...");

      setVisiable(false)
    }, 200)
  }
  return (
    <div>
      <button onClick={() => setVisiable(true)}>open modal</button>
      <Modal
        title={<span style={{ color: 'red' }}>删除用户</span>}
        closable
        type="confirm"
        visiable={visiable}
        onCancel={() => setVisiable(false)}
        onOk={submit}
        width={500}
        // footer这个props叫render props
        footer={
          () => {
            return [
              <Button type='danger' key="1" onClick={() => setVisiable(false)}>残忍离开</Button>,
              <Button type='primary' key="2">确定</Button>
            ]
          }
        }
      >
        <div>
          <input type="text" />
          <div>你确定要添加此用户吗？</div>
        </div>
      </Modal>
    </div>
  )
}

export default PageA;

